<template>
  <el-dialog
    title="导入工作"
    :fullscreen="fullscreen"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :inline="true">
      <el-form-item>
        <upload-excel :columnList="columnList" v-model="dataList"></upload-excel>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="btnDisabled || hasError" @click="handleImport()">确定导入</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="btnDisabled || hasError" @click="exportModel()">导出模板</el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type=""
                   circle
                   icon="el-icon-full-screen"
                   @click="fullscreen=!fullscreen">
        </el-button>
      </el-form-item>
    </el-form>
    <template v-if="dataList.length>0">
      <el-table
        :data="pageList"
        :row-class-name="tableRowClassName"
        border
        v-loading="dataListLoading"
        style="width: 100%;">

        <el-table-column
          v-for="(value,key,index) in columnList"
          :key="index"
          :prop="value"
          header-align="center"
          align="center"
          :label="key">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.hasError"
              :content="scope.row.errorMsg"
              trigger="hover"
              placement="top">
              <div slot="reference" class="name-wrapper">
                {{ scope.row[value] }}
              </div>
            </el-popover>
            <div v-else>{{ scope.row[value] }}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </template>
  </el-dialog>
</template>

<script>
  import UploadExcel from '@/components/upload/uploadExcel'

  export default {
    data() {
      return {
        fullscreen: false,
        visible: false,
        btnDisabled: false,
        dataForm: {
          key: ''
        },
        dataList: [],
        columnList: {
          "姓名": "name",
          "年龄": "age",
          "地址": "address"
        },
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
      }
    },
    computed: {
      hasError() {
        for (let i in this.dataList) {
          if (this.dataList[i].hasError) {
            return true;
          }
        }
        return false;
      },
      pageList() {
        this.totalPage = this.dataList.length;

        let page = [];
        let start = (this.pageIndex - 1) * this.pageSize;
        let limit = this.pageIndex * this.pageSize;

        for (let i = start; i < this.dataList.length && i < limit; i++) {
          page.push(this.dataList[i]);
        }
        return page;
      }
    },
    components: {UploadExcel},
    methods: {
      init() {
        this.visible = true;
        this.fullscreen = false;
        this.btnDisabled = false;
        this.dataList = [];
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
      },
      // 下载模板
      exportModel() {
        window.location.href = '/user/exportModel';
      },
      handleImport() {
        if (this.dataList.length === 0) {
          this.$message.error("请先上传数据");
          return;
        }
        this.btnDisabled = true;
        this.$axios({
          method:"post",
          url:"/user/insert",
          data: this.dataList
        }).then((data)=>{
          if (data && data.status === 200){
                    this.visible = false;
                    this.$emit('refreshDataList');
                    this.btnDisabled = false;
          }else if (data && data.code === 40010) {
                this.dataList = data.list;
                this.$message.error(data.msg);
                this.btnDisabled = false;
              } else {
                this.$message.error(data.msg);
                this.btnDisabled = false;
              }
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (row.hasError) {
          return 'warning-row';
        } else {
          return '';
        }
      }
    }
  }
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
